<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>大麦商城</title>
<link href="css/slider.css" rel="stylesheet" type="text/css"/>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<link href="css/index.css" rel="stylesheet" type="text/css"/>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/damai.js"></script>
</head>
<body>
<div id="app">
	<damai>
		<div class="container index">


			<div class="span24">
				<div id="hotProduct" class="hotProduct clearfix">
					<div class="title">
						<strong>热门商品</strong>
						<!-- <a ></a> -->
					</div>
					<ul class="tab">
						<li class="current">
							<a href="./蔬菜分类.htm?tagIds=1"></a>
						</li>
						<li>
							<a ></a>
						</li>
						<li>
							<a></a>
						</li>
					</ul>
					<ul class="tabContent" style="display: block;">

						<li v-for="p in hots">
							<a :href="'detail.html?pid='+p.pid">
								<img :src="p.image" style="display: block;"></a>
						</li>


					</ul>
				</div>
			</div>
			<div class="span24">
				<div id="newProduct" class="newProduct clearfix">
					<div class="title">
						<strong>最新商品</strong>
						<a ></a>
					</div>
					<ul class="tab">
						<li class="current">
							<a href="./蔬菜分类.htm?tagIds=2"></a>
						</li>
						<li>
							<a ></a>
						</li>
						<li>
							<a></a>
						</li>
					</ul>
					<ul class="tabContent" style="display: block;">

						<li v-for="p in news">
							<a :href="'detail.html? pid='+p.pid">
								<img :src="p.image" style="display: block;"></a>
						</li>

					</ul>
				</div>
			</div>
			<div class="span24">
				<div class="friendLink">
					<dl>
						<dd>新手指南</dd>
						<dd>
							<a >支付方式</a>
							|
						</dd>
						<dd>
							<a >配送方式</a>
							|
						</dd>
						<dd>
							<a >售后服务</a>
							|
						</dd>
						<dd>
							<a >购物帮助</a>
							|
						</dd>
						<dd>
							<a >蔬菜卡</a>
							|
						</dd>
						<dd>
							<a >礼品卡</a>
							|
						</dd>
						<dd>
							<a>银联卡</a>
							|
						</dd>
						<dd>
							<a >亿家卡</a>
							|
						</dd>

						<dd class="more">
							<a >更多</a>
						</dd>
					</dl>
				</div>
			</div>
		</div>
	</damai>

</div>
<script>
	var v=new Vue({
		el:"#app",
		data:{
			news:[],
			hots:[]
		},
		//钩子函数
		created(){
			axios.get("product/queryIndexProduct").then(res=>{
				let map=res.data;
				this.news=map.news.records;
				this.hots=map.hots.records;
			})
		}

	})
</script>

</body></html>